{extend name="base" /}
{block name="head"}

{/block}


{block name='content'}


<div class="layui-card" id="view_tpl1"></div>


<div class="layui-card">
    <div class="layui-tab layui-tab-brief" lay-filter="doc">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="detail">接口详情</li>
            <li lay-id="debug">在线调试</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div id="view_tpl2"></div>
            </div>
            <div class="layui-tab-item">
                <div id="view_tpl3"></div>
            </div>
        </div>
    </div>
</div>


<script type="text/html" id="tpl1">

    <div class="layui-card-header" style="font-size: 16px">
        {{ d.title }}
    </div>
    <div class="layui-card-body">
        {{ d.desc}}
    </div>

</script>
<script type="text/html" id="tpl2">
    <table class="layui-table">
        <colgroup>
            <col width="100">
            <col>
        </colgroup>
        <tbody>
        <tr>
            <td>接口地址</td>
            <td>
                    {{ d.url }}
            </td>
        </tr>
        <tr>
            <td>后台方法</td>
            <td>{{ d.href }}</td>
        </tr>
        <tr>
            <td>请求方式</td>
            <td>{{ d.method ? d.method : '-' }}</td>
        </tr>
        <tr>
            <td>接口版本</td>
            <td>{{ d.version ? d.version : '-' }}</td>
        </tr>
        <tr>
            <td>开发人员</td>
            <td>{{ d.author ? d.author : '-' }}</td>
        </tr>


        {{# if(d.param){ }}
        <tr>
            <td>请求参数</td>
            <td>
                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>验证规则</th>
                        <th>说明</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{# layui.each(d.param,function(k,v){ }}
                    <tr>
                        <td>{{ v.name }}</td>
                        <td>{{ v.type }}</td>
                        <td>{{ v.default }}</td>
                        <td>{{ v.valid }}</td>
                        <td>{{ v.desc }}</td>
                    </tr>
                    {{# }); }}
                    </tbody>

                </table>
            </td>
        </tr>
        {{# } }}

        {{# if(d.return){ }}
        <tr>
            <td>响应参数</td>
            <td>
                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                       
                        <th>名称</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>说明</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{# layui.each(d.return,function(k,v){ }}
                    <tr>
                        <td>{{ v.name }}</td>
                        <td>{{ v.type }}</td>
                        <td>{{ v.default }}</td>
                        <td>{{ v.desc }}</td>
                    </tr>
                    {{# }); }}
                    </tbody>
                </table>
            </td>
        </tr>
        {{# } }}
        </tbody>
    </table>
</script>
<script type="text/html" id="tpl3">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">接口地址</label>
            <div class="layui-input-block">
                {{# if(d.method == 'api'){ }}
                <input type="url" name="url" required readonly="readonly"
                       autocomplete="off" class="layui-input"
                       value="{{ d.href ? d.href : ''}}">
                {{# }else{ }}
                <input type="url" name="url" required lay-verify="url" placeholder="请输入接口地址"
                       autocomplete="off" class="layui-input"
                       value="{{ d.url ? d.url : ''}}">
                {{# } }}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请求方式</label>
            <div class="layui-input-inline">
                <select name="method" lay-verify="required">
                    {{# if(d.method == 'api'){ }}
                        <option value="API" selected}}>API</option>
                    {{# }else{ }}
                        {{# layui.each(['GET','POST','PUT','DELETE'],function(index,item){ }}
                        <option value="{{ item }}"
                                {{# if(item.trim()== d.method.trim()){ }}selected{{# } }}>{{ item }}
                        </option>
                        {{# }); }}
                    {{# } }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请求头部</label>
            <div class="layui-input-block">

                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>参数</th>
                        <th>参数值</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{# if(d.is_header == 1){ }}
                    {{# layui.each(d._header,function(index,item){ }}
                    <tr>
                        <td><input name="header[name][]" type="text" disabled class="layui-input" value="{{ index }}">
                        </td>
                        <td><input name="header[value][]" type="text" class="layui-input" value="{{ item }}"></td>
                        <th>
                            <button class="layui-btn layui-btn-danger layui-btn-xs"
                                    type="button" data-type="del">删除
                            </button>
                        </th>
                    </tr>
                    {{# }); }}
                    {{# }; }}
                    </tbody>
                </table>

                <div style="text-align: center;">
                    <button class="layui-btn layui-btn-normal layui-btn-sm"
                            data-type="add" data-field="header"
                            type="button">添加一行
                    </button>
                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请求参数</label>
            <div class="layui-input-block">

                <table class="layui-table">
                    <colgroup>
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>参数</th>
                        <th>参数值</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{# if(d.is_params == 1){ }}
                    {{# layui.each(d._params,function(index,item){ }}
                    <tr>
                        <td><input name="params[name][]" type="text" disabled class="layui-input" value="{{ index }}">
                        </td>
                        <td><input name="params[value][]" type="text" class="layui-input" value="{{ item }}"></td>
                        <th>
                            <button class="layui-btn layui-btn-danger layui-btn-xs"
                                    type="button" data-type="del">删除
                            </button>
                        </th>
                    </tr>
                    {{# }); }}
                    {{# }; }}

                    {{# if(d.param){ }}
                    {{# layui.each(d.param,function(index,item){ }}
                    <tr>
                        <td><input name="params[name][]" type="text" class="layui-input" value="{{ item['name'] }}"></td>
                        <td><input name="params[value][]" type="text" class="layui-input" value="{{ item['default'] }}"></td>
                        <td>
                            <button class="layui-btn layui-btn-danger layui-btn-xs"
                                    type="button" data-type="del">删除
                            </button>
                        </td>
                    </tr>

                    {{# }); }}
                    {{# } }}
                    </tbody>
                </table>

                <div style="text-align: center;">
                    <button class="layui-btn layui-btn-normal layui-btn-sm"
                            type="button" data-type="add" data-field="params">添加一行
                    </button>
                </div>
            </div>
        </div>
        <input type="hidden" name="cookie" value="{:http_build_query($_COOKIE,'',';')}">

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="debug">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<div class="layui-card">
    <div class="layui-card-header">温馨提示</div>
    <div class="layui-card-body">
        此文档是由系统自动生成，如发现错误或疑问请告知开发人员及时修改
    </div>
</div>


{/block}

{block name='js'}
<script>
    layui.use(['laytpl', 'jquery'], function () {
        var laytpl = layui.laytpl
            , $ = layui.jquery;


        $.get(window.location.href, function (response) {
            if (response.status == 100) {
                render(tpl1.innerHTML, 'view_tpl1', response.data);
                render(tpl2.innerHTML, 'view_tpl2', response.data);
                render(tpl3.innerHTML, 'view_tpl3', response.data);
            }
        });

        function render(tpl, _view, data) {
            var view = document.getElementById(_view);
            laytpl(tpl).render(data, function (html) {
                view.innerHTML = html;
            })
        }

        var action = {
            add: function () {
                var field = this.data('field')
                this.parents('.layui-input-block').find('table tbody').append("<tr>\n" +
                    "                        <td><input name='" + field + "[name][]' type=\"text\" class=\"layui-input\" value=''></td>\n" +
                    "                        <td><input name='" + field + "[value][]' type=\"text\" class=\"layui-input\" value=''></td>\n" +
                    "                        <td>\n" +
                    "                            <button class=\"layui-btn layui-btn-danger layui-btn-xs\"\n" +
                    "                                    data-type=\"del\" \n" +
                    "                                    type=\"button\">删除\n" +
                    "                            </button>\n" +
                    "                        </td>\n" +
                    "                    </tr>");
            },
            del: function () {
                this.parents('tr').remove();
            }
        }

        $('body').delegate('button', 'click', function () {
            var type = $(this).data('type');
            action[type] && action[type].call($(this));
        });


        // 格式化对象输出
        function writeHtml(obj) {
            var objStr = JSON.stringify(obj, null, 4);
            var html = objStr.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp');
            return html
        }

        layui.use(['form', 'layer'], function () {
            var form = layui.form
                , layer = layui.layer;

            form.on('submit(debug)', function (data) {
                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                $.ajax({
                    url: "/doc/format_params",
                    type: 'POST',
                    data: data.field,
                    success: function (response) {
                        if(data.field.method != 'API'){
                            $.ajax({
                                url: data.field.url,
                                type: data.field.method,
                                headers: response.data.header,
                                data: response.data.params,

                                complete: function (XHR) {
                                    layer.close(index);
                                    var html = "";
                                    if (XHR.readyState == 4 && XHR.status == 200) {
                                        html = "<pre class='layui-code' lay-skin='notepad' lay-encode='true' style='margin: 0'>" + writeHtml(XHR.responseJSON) + "</pre>";
                                    } else {
                                        html = XHR.responseText;
                                    }
                                    layer.style(layer.open({
                                        type: 1,
                                        shade: false,
                                        area: '700px',
                                        maxHeight: document.body.clientHeight - 100,
                                        title: false, //不显示标题
                                        content: html
                                    }), {
                                        top: '80px'
                                    });
                                }
                            })
                        }
                    },
                    complete: function (XHR) {
                        if(data.field.method == 'API') {
                            layer.close(index);
                            var html = "";
                            if (XHR.readyState == 4 && XHR.status == 200) {
                                html = "<pre class='layui-code' lay-skin='notepad' lay-encode='true' style='margin: 0'>" + writeHtml(XHR.responseJSON) + "</pre>";
                            } else {
                                html = XHR.responseText;
                            }
                            layer.style(layer.open({
                                type: 1,
                                shade: false,
                                area: '700px',
                                maxHeight: document.body.clientHeight - 100,
                                title: false, //不显示标题
                                content: html
                            }), {
                                top: '80px'
                            });
                        }
                    }
                });
                return false;
            })
        })
    });
</script>
{/block}


